<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :width="width"
    :modal-append-to-body="modalAppendToBody"
    :append-to-body="appendToBody"
    :custom-class="customClass"
    :before-close="beforeClose"
    @close="close"
  >
    <div slot="title" class="relative">
      <div class="dialog-title c-fff">{{ title }}</div>
      <img
        v-show="show"
        @click="handleClick"
        class="image absolute pointer"
        :src="imgUrl + '/profile/personinfo/2023/9/25/help_312f13a0f2614d6390ab99dd4f7794d2.png'"
      />
    </div>
    <slot></slot>
    <span v-if="$slots.footer" slot="footer" class="dialog-footer">
      <slot name="footer"></slot>
    </span>
  </el-dialog>
</template>

<script>
import helpApi from '@/api/system/help'
import { getHttpURL } from '@/utils/fileUtils'

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    visible: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '50%'
    },
    beforeClose: Function,
    customClass: {
      type: String,
      default: ''
    },
    appendToBody: {
      type: Boolean,
      default: false
    },
    modalAppendToBody: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    dialogVisible: {
      get() {
        if (this.visible) this.getData()
        return this.visible
      },
      set(value) {
        this.show = false
        this.fileUrl = ''
        this.$emit('update:visible', value)
      }
    }
  },
  data() {
    return {
      imgUrl: process.env.VUE_APP_IMG_API,
      show: false,
      fileUrl: ''
    }
  },
  methods: {
    getData() {
      if (!this.title) {
        return
      }
      helpApi.helpDetail({ helpKey: this.title }).then((res) => {
        if (res.data) {
          this.show = true
          this.fileUrl = res.data.fileUrl
        }
      })
    },
    close() {
      this.$emit('close')
    },
    handleClick() {
      window.open(getHttpURL(this.fileUrl), '_blank')
    }
  }
}
</script>

<style lang="scss" scoped>
.dialog-title {
  line-height: 24px;
  font-size: 18px;
}
.image {
  height: 30px;
  right: 30px;
  top: -2px;
}
</style>
